html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

body {
  font-family: 'STKaiti','sans-serif';
}

section {
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
  position: relative;
  height: 100vh;
}

.section-one {
  background-image: url("https://s2.ax1x.com/2019/06/17/Vb977V.jpg");
}

.section-one > .section-inner::before {
  mix-blend-mode: difference;  
}

.section-two {
  background-image: url("https://s2.ax1x.com/2019/06/17/VbCSn1.jpg");
}

.section-two > .section-inner::before {
  mix-blend-mode: darken;  
}

.section-three {
  background-image: url("https://s2.ax1x.com/2019/06/17/Vb9uYF.jpg");
}

.section-three > .section-inner::before {
  mix-blend-mode: difference;  
}

.section-inner {
  clip: rect(auto auto auto auto);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.section-inner::before {
  content: " ";
  padding: 7rem 13rem;
  background: #94232d;
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  border-radius: 2px;
}

.section-scroll {
  height: 100vh;
  overflow-y: auto;
}

.title {
  font-weight: bold;
  text-align: center;
  padding: 1rem 4rem;
  z-index: 1000;
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  mix-blend-mode: lighten;
  border-radius: 2px;
}

.title-name {
  font-size: 5rem;
}

.title-sub {
  font-size: 0.8rem;
}

.btn-group {
  text-align: center;
  margin-top: 1rem;
}

.zhui-btn {
  margin: 0.4rem 1rem;
}


@media screen and (max-width: 600px) {
  html, body {
    font-size: 6px;
  }

  .section-inner::before {
    padding: 8.5rem 10.5rem;
  }
}